<template>
  <el-card shadow="hover">
    <v-chart v-if="isShow" class="chart" :option="option" autoresize />
    <template v-else>
      不要连续刷新，接口对同一ip数据响应有时间间隔限制
    </template>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { getCity } from '@/api/modules/system'
import axios from 'axios'

// 是否显示
const isShow = ref(true)

const option = reactive<any>({
  title: {
    text: '',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: [],
  },
  color: ['#e6a23c', '#f56c6c', '#67c23a'],
  series: [
    {
      name: '人数',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
})
// 饼图初始化
const initPieChart = async () => {
  let city = ''
  const legendData = ['']
  const data = [
    { name: '确诊', value: 0 },
    { name: '死亡', value: 0 },
    { name: '治愈', value: 0 },
  ]
  await getCity()
    .then((res) => {
      city = res.data
      option.title.text = `${city}市疫情一览`
    })
    .catch((err) => {
      console.log(err)
    })

  await axios
    .get('https://v.api.aa1.cn/api/api-yq/index.php', {
      params: { city: city },
    })
    .then((res) => {
      data[0].value = res.data.diagnosis
      data[1].value = res.data.death
      data[2].value = res.data.cure
      option.series[0].data = data
      option.legend.data = ['确诊', '死亡', '治愈']
    })
    .catch((err) => {
      isShow.value = false
      console.log(err)
    })
}
onMounted(() => {
  initPieChart()
})
</script>

<style scoped>
.chart {
  height: 300px;
  width: calc(100vw - 260px);
}
</style>
